<template>
    <div class="site-details-info">
      <ul class="site-link-list">
        <li
          :class="{active: index === selectIndex}"
          :key="index"
          v-for="(item,index) in siteDetailsList"
          @click="tabToggle(item,index)"
        >{{ item.name }}
        </li>
      </ul>
      <ul>
        <li v-if="selectIndex === 0">
          <div class="site-info-wrap base-content">
            <el-scrollbar style="height: 100%;">
              <table class="normal-table">
                <tr>
                  <th>断面名称</th>
                  <td>后寨</td>
                  <th>断面编号</th>
                  <td>A410800_0002</td>
                  <th>密码</th>
                  <td>647604</td>
                </tr>
                <tr>
                  <th>所属区域</th>
                  <td>晋城市</td>
                  <th>所属河流</th>
                  <td>丹河</td>
                  <th>当地管理单位</th>
                  <td>--</td>
                </tr>
                <tr>
                  <th>站点分类</th>
                  <td>固定站</td>
                  <th>站点类别</th>
                  <td>上收站</td>
                  <th>所属包件</th>
                  <td>10-宇星</td>
                </tr>
                <tr>
                  <th>地表水类型</th>
                  <td>河流</td>
                  <th>水质目标级别</th>
                  <td>Ⅲ类</td>
                  <th>承建省市</th>
                  <td>10-山西省</td>
                </tr>
                <tr>
                  <th>经度、纬度</th>
                  <td>35.311814-112.121327</td>
                  <th>排序</th>
                  <td>916</td>
                  <th>上下游省份</th>
                  <td>晋-豫</td>
                </tr>
                <tr>
                  <th>是否验收</th>
                  <td>是</td>
                  <th>验收时间</th>
                  <td>2019-05-05</td>
                  <th>考核城市</th>
                  <td>太原市</td>
                </tr>
                <tr>
                  <th>断面属性</th>
                  <td>省界（晋-豫）</td>
                  <th>断面功能</th>
                  <td>考核、评价、排名</td>
                  <th>大小运维</th>
                  <td>--</td>
                </tr>
                <tr>
                  <th>站点地址</th>
                  <td colspan="5">--</td>
                </tr>
                <tr>
                  <th>站点简介</th>
                  <td colspan="5">
                    丹河后寨站属于国家水质自动监察网，位于黄河流域沁河支流的最大支流，有地方建设。
                    该站有国家统一运行管理，监测数据与地方共享。该站与2012年10月开始建设，2012年12月竣工。
                    站房建筑面积272平米，站址海拔高程297M。该站的控制断面位于黄河流域沁河支流的山西省泽州县--河南省博爱县段。
                    流经山西省晋城市高平，泽州，河南省焦作市，博爱，沁阳注入沁河,全长169Km,流域面积3152平方公里。
                  </td>
                </tr>
                <tr>
                  <th>历史文化介绍（周边环境）</th>
                  <td colspan="5">
                    丹河后寨站属于国家水质自动监察网，位于黄河流域沁河支流的最大支流，有地方建设。
                    该站有国家统一运行管理，监测数据与地方共享。该站与2012年10月开始建设，2012年12月竣工。
                    站房建筑面积272平米，站址海拔高程297M。该站的控制断面位于黄河流域沁河支流的山西省泽州县--河南省博爱县段。
                    流经山西省晋城市高平，泽州，河南省焦作市，博爱，沁阳注入沁河,全长169Km,流域面积3152平方公里。
                  </td>
                </tr>
              </table>
            </el-scrollbar>
          </div>
        </li>
        <li v-if="selectIndex === 1">
            <div class="instrument-param">
              仪器参数
            </div>
        </li>
        <li v-if="selectIndex === 2">
          <div class="site-image clear">
            <div class="big-image">
              <img :src="siteImage.img" :alt="siteImage.name" :title="siteImage.name">
            </div>
            <div class="small-image-wrap base-content">
              <el-scrollbar style="height: 100%">
                <ul>
                  <li v-for="(item,index) in siteImage.list"
                      :class="{active: siteImage.active === index}"
                      @click="toggleImage(item,index)"
                      :key="index">
                    <img :src="item.img" :alt="item.time" :title="item.time">
                    <p>{{ item.time }}</p>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "siteDetailsInfo",
        data(){
          return{
            selectIndex: 0,
            siteDetailsList:[{
              name:'站点信息',
              src:'siteInfo'
              },{
                name:'仪器参数',
                  src:'instrumentParam'
              },{
                name:'站点图片',
                  src:'siteImage'
              }],
            siteImage:{
              img:'./static/images/siteImage/site-image.png',
              active:0,
              name:'2019-05-04 10:00',
              list:[{
                img:'./static/images/siteImage/site-image.png',
                time:'2019-05-04 10:00'
              },{
                img:'./static/images/siteImage/site-image.png',
                time:'2019-05-04 11:00'
              },{
                img:'./static/images/siteImage/site-image.png',
                time:'2019-05-04 12:00'
              },{
                img:'./static/images/siteImage/site-image.png',
                time:'2019-05-04 13:00'
              },{
                img:'./static/images/siteImage/site-image.png',
                time:'2019-05-04 14:00'
              }]
            }
          }
        },
        methods:{
          //tab页切换
          tabToggle(item,index){
            this.selectIndex = index;
          },
          //图片选择事件
          toggleImage(item,index){
            this.siteImage.img = item.img;
            this.siteImage.active = index;
            this.siteImage.name = item.time;
          },
        }
    }
</script>

<style scoped lang="less">
.site-details-info{

}
.site-link-list{
  height: 32px;
  line-height: 30px;
  border-bottom: 1px solid #d6e3f2;
  li{
    width: calc(100% / 6);
    float: left;
    text-align: center;
    border-right: 1px solid #d6e3f2;
    position: relative;
    cursor: pointer;
  }
  /*li:first-child{
    border-left: none;
  }*/
  li:hover{
    background: #eaeff4;
  }
  li.active{
    color: #166bce;
    border-bottom: 1px solid #fff;
  }
  li.active:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #166bce;
  }
}
.site-info-wrap{
  height: 466px;
  padding: 8px;
}
.normal-table{
  th,td{
    height: auto;
    padding: 6px 8px;
  }
  th{
    width: 80px;
  }
  td{
    width: calc(33.3% - 82px);
    line-height: 22px;
  }
}
.instrument-param{
  height: 466px;
}
.site-image{
  height: 466px;
  padding: 16px;
  .big-image{
    border: 3px solid #d6e3f2;
    width: calc(100% - 188px);
    height: 100%;
    float: left;
    &>img{
      height: 100%;
      width: 100%;
    }
  }
  .small-image-wrap{
    float: right;
    width: 178px;
    border: 1px solid #d6e3f2;
    height: 100%;
    ul{
      padding: 8px;
      &>li{
        height: 100px;
        border: 2px solid #cbdef2;
        position: relative;
        margin-bottom: 8px;
        cursor: pointer;
        &:last-child{
          margin-bottom: 0;
        }
        &:hover{
          border-color: #11a4fb;
        }
        &>p{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding-left: 8px;
          font-size: 12px;
          color: #fff;
        }
        &>img{
          width: 100%;
          height: 100%;
        }
      }
      &>li.active{
        border-color: #11a4fb;
        &:before{
          content: '';
          position: absolute;
          top: 50%;
          margin-left: -5px;
          left: -12px;
          border: 8px solid transparent;
          border-right-color: #11a4fb;
        }
      }
    }
  }
}
</style>
